﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Demo::Calendar::</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="../main.css">
        <script src="../../release/jskit.core.js">
        </script>
        <script src="../JskitConfig_doc.js">
        </script>
        <style>
            .tableCssClass {
                border: #000000 solid 1px;
                border-collapse: collapse;
            }
            
            .tableCssClass TD {
                border: #000000 solid 1px;
                font-family: verdana;
            }
            
            .theadCssClass {
                border: #000000 solid 1px;
                border-collapse: collapse;
            }
            
            .theadCssClass TD {
                font-size: 12px;
                font-weight: bold;
                color: #ffff00;
                text-align: center;
                border: #000000 solid 1px;
                border-collapse: collapse;
                padding: 5px 5px 5px 5px;
                background-color: #336699;
                width: 30px;
            }
            
            .tbodyCssClass {
                border: #000000 solid 1px;
                border-collapse: collapse;
                background-color: #eeeeee;
            }
            
            .tbodyCssClass TD {
                font-size: 12px;
                font-weight: bold;
				text-align:center;
                border: #000000 solid 1px;
                border-collapse: collapse;
                padding: 5px 5px 5px 5px;
            }
			.weekend{
				background-color:#ffffd0;
			}
        </style>
        <script>
        	var jc = new JskitCalendar();
            var jt = new JskitTable();
            
            jt.setTableCssClass("tableCssClass");
            jt.setTHeadCssClass("theadCssClass");
            jt.setTBodyCssClass("tbodyCssClass");
            
            jt.setColumns("日", "一", "二","三","四","五","六");
			jt.setColumnCssClass("日","weekend");
			jt.setColumnCssClass("六","weekend");
            
			jt.setAction("onclick","showLunar");
			
			var dayListInCalendar = null;
			function drawCalendar(){
				dayListInCalendar = jc.getCalendarList();
				for(var i=0;i<dayListInCalendar.length;i++){
					var _w = dayListInCalendar[i];
		            jt.insert(convertDayCell(_w[0]),convertDayCell(_w[1]),convertDayCell(_w[2]),convertDayCell(_w[3]),convertDayCell(_w[4]),convertDayCell(_w[5]),convertDayCell(_w[6]));
				}
				$$("#canvas").innerHTML = jt.getTable();
				$$("#info").innerHTML = jc.getYear()+"-"+jc.getMonth();
			}
			function convertDayCell(day){
				if(day=="")return "";
				jc.lunar.parse(jc.getYear(),jc.getMonth(),day);
				var _lf = jc.lunar.getFestival();
				return day + "<br>" + _lf;
			}
			function goNext(){
				jc.nextMonth();
	            jt.clear();
				drawCalendar();
			}
			function goPrev(){
				jc.prevMonth();
	            jt.clear();
				drawCalendar();
			}
			function showLunar(obj){
				$$("#lunar").innerHTML = "";	
				var _row = obj.getAttribute("row").toInt(0);
				var _col = obj.getAttribute("col").toInt(0);
				var _day = dayListInCalendar[_row][_col];
				if(!isNaN(_day)){
					jc.lunar.parse(jc.getYear(),jc.getMonth(),_day);
					$$("#lunar").innerHTML = jc.lunar.date["GanzhiYear"]+"年" + jc.lunar.date["MonthText"]+"月" + jc.lunar.date["DayText"];  
				}else{
					$$("#lunar").innerHTML = "error";
				}
			}
            var clock = null;
            function drawClock(){
                clock.innerHTML = jc.clock.toString("yyyy:MM:dd hh:mm:ss");
            }
            function onPageLoad(){
                clock = $$("#clock");
                drawClock();
                var clockTimer = window.setInterval("drawClock()",1000);
                drawCalendar();
            }
        </script>
    </head>
    <body onload="onPageLoad()">
        <table border="0" id="Table1">
            <tbody>
                <tr>
                    <td class="Package">
                        使用JskitTable.js 和JskitCalendar.js输出一个日历
                    </td>
                </tr>
                <tr>
                    <td class="content">
                        <a href="../tutorial/JskitTable.html">查看JskitTable.js参考</a>
                        <br><a href="../tutorial/JskitCalendar.html">查看JskitCalendar.js参考</a>
                        <br><a href="date_selector.html">查看JskitDateSelector.js示例</a>
                    </td>
                </tr>
                <tr>
                    <td height="30">
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>输出时钟：</div>
                        <div id="clock" style="color:#00aa00;font-size:20px;height:40px;"></div>
                        <div>输出日历：</div>
                        <table>
                            <tr>
                                <td>
                                    <input type="button" value="<<" onclick="goPrev()"/>
                                </td>
                                <td align="center">
                                    <div id="info" style="font-weight:bold;font-size:14px;">
                                    </div>
                                </td>
                                <td align="right">
                                    <input type="button" value=">>" onclick="goNext()"/>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <div id="canvas">
                                    </div>
                                </td>
                            </tr>
							<tr>
								<td colspan="3" align="center" height="30px"><div id="lunar" style="font-weight:bold;"></div></td>
							</tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="content">
                        一、引入必须的javascript文件
                        <textarea name="JskitSyntax_code" class="html">
                            &lt;head>
                            ...
                            &lt;!--// import javascript files -->
                            &lt;script src="$JSKIT_PATH$/base/JskitBase.js">&lt;/script>
                            &lt;script src="$JSKIT_PATH$/base/JskitUtil.js">&lt;/script>
                            &lt;script src="$JSKIT_PATH$/base/JskitCalendar.js">&lt;/script>
                            &lt;script src="$JSKIT_PATH$/ui/JskitTable.js"> &lt;/script>
                            ...
                            &lt;/head>
                        </textarea>
                        二、部署和初始化
                        <textarea name="JskitSyntax_code" class="js">
var jc = new JskitCalendar();
var jt = new JskitTable();

//设置table的样式
jt.setTableCssClass("tableCssClass");
jt.setTHeadCssClass("theadCssClass");
jt.setTBodyCssClass("tbodyCssClass");

//设置表头(column)
jt.setColumns("Sun", "Mon", "Tus","Wen","Thr","Fri","Sta");

//指定sun和sta列的单元格样式
jt.setColumnCssClass("Sun","weekend");
jt.setColumnCssClass("Sta","weekend");

jt.setAction("onmouseover","showLunar");

var dayListInCalendar = null;

//输出日历
function drawCalendar(){
	dayListInCalendar = jc.getCalendarList();
	for(var i=0;i&lt;dayListInCalendar.length;i++){
		var _w = dayListInCalendar[i];
        jt.insert(_w[0],_w[1],_w[2],_w[3],_w[4],_w[5],_w[6]);
	}
	$$("#canvas").innerHTML = jt.getTable();
	$$("#info").innerHTML = jc.getYear()+"-"+jc.getMonth();
}

//显示下一个月
function goNext(){
	jc.nextMonth();
	jt.clear();
	drawCalendar();
}
//显示上一个月
function goPrev(){
	jc.prevMonth();
	jt.clear();
	drawCalendar();
}
//显示农历
//注意：该方法，应用了单元格事件
function showLunar(obj){
	$$("#lunar").innerHTML = "";	
	var _row = obj.getAttribute("row").toInt(0);
	var _col = obj.getAttribute("col").toInt(0);
	var _day = dayListInCalendar[_row][_col];
	if(!isNaN(_day)){
		jc.lunar.parse(jc.getYear(),jc.getMonth(),_day);
		$$("#lunar").innerHTML = jc.lunar.date["GanzhiYear"]+"年" + jc.lunar.date["MonthText"]+"月" + jc.lunar.date["DayText"];  
	}else{
		$$("#lunar").innerHTML = "error";
	}
}
                        </textarea>
                        三、设置输出翻页器的位置
                        <textarea name="JskitSyntax_code" class="html">
                            <!--//id 可以随意设定 -->
                            &lt;table&gt;
                                &lt;tr&gt;
                                    &lt;td&gt;
                                        &lt;input type="button" value="&lt;&lt;" onclick="goPrev()"/&gt;
                                    &lt;/td&gt;
                                    &lt;td align="center"&gt;
                                        &lt;div id="info"&gt;
                                        &lt;/div&gt;
                                    &lt;/td&gt;
                                    &lt;td align="right"&gt;
                                        &lt;input type="button" value="&gt;&gt;" onclick="goNext()"/&gt;
                                    &lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;tr&gt;
                                    &lt;td colspan="3"&gt;
                                        &lt;div id="canvas"&gt;
                                        &lt;/div&gt;
                                    &lt;/td&gt;
                                &lt;/tr&gt;
                            &lt;/table&gt;
                        </textarea>
                        四、设置显示样式
                        <textarea name="JskitSyntax_code" class="css">
            .tableCssClass {
                border: #000000 solid 1px;
                border-collapse: collapse;
            }
            
            .tableCssClass TD {
                border: #000000 solid 1px;
                font-family: verdana;
            }
            
            .theadCssClass {
                border: #000000 solid 1px;
                border-collapse: collapse;
            }
            
            .theadCssClass TD {
                font-size: 12px;
                font-weight: bold;
                color: #ffff00;
                text-align: center;
                border: #000000 solid 1px;
                border-collapse: collapse;
                padding: 5px 5px 5px 5px;
                background-color: #336699;
                width: 30px;
            }
            
            .tbodyCssClass {
                border: #000000 solid 1px;
                border-collapse: collapse;
                background-color: #eeeeee;
            }
            
            .tbodyCssClass TD {
                font-size: 16px;
                font-weight: bold;
				text-align:center;
                border: #000000 solid 1px;
                border-collapse: collapse;
                padding: 5px 5px 5px 5px;
            }
			.weekend{
				background-color:#ffffd0;
			}
                        </textarea>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
